import React, { useEffect, useState } from 'react'
import { TrophyFilled, SketchCircleFilled ,AppstoreFilled,ExportOutlined,CheckCircleOutlined} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu, Button } from 'antd';
import {useNavigate,Outlet,useLocation } from 'react-router-dom'
import './index.scss'
const items: MenuProps['items'] = [
    {
        label: '我的', key: 'me', children: [
            { key: 'user', label: '用户中心', icon: <TrophyFilled /> },
            { key: 'account', label: '开通账号', icon: <SketchCircleFilled /> },
            { key: 'accounts', label: '已开通账号', icon: <CheckCircleOutlined /> },
        ],
        type: 'group'
    }
];
export default function Home() {
    const navigator = useNavigate()
    const location = useLocation()
    const [collapsed, setCollapsed] = useState(false);
    const [winState, setWinState] = useState(false)
    const [width, setWidth] = useState(0)
    //递归渲染标题
    const getItem = (e:any):any => { 
        for (let i = 0; i < e.length; i++) {
            if (e[i].key === location.pathname.split('/')[location.pathname.split('/').length - 1]) { 
                return e[i].label
            }
            if (e[i].children) { 
                return getItem(e[i].children)
            }
        }
        
    }
    //客户端切换函数
    function resizeUpdate() { 
        if (window.innerWidth >= 1024) {
            setWinState(false)
        } else { 
            setWinState(true)
            setCollapsed(false)
        }
    }
    //监控客户端分辨率
    useEffect(() => { 
        window.addEventListener('resize',resizeUpdate)
        resizeUpdate()
        return () => { 
            window.removeEventListener('resize', resizeUpdate)
        }
    },[])
    const onClick: MenuProps['onClick'] = (e) => {
        navigator(e.key)
        window.location.reload()
    };
    const toggleCollapsed = () => {
        if (winState) { 
            setWidth(width === 0 ? 256 : 0)
            return
        }
        setCollapsed(!collapsed);
    };
    function exitLogin() { 
        localStorage.clear()
        navigator('/login')
    }
    
    return (
        <div className='home'>
            <div onClick={() => { setWidth(width === 0 ? 256 : 0)}} className={ `${winState&&width===256?'show':'hidden dis'}`} style={{ width: '100%',height:'100vh',position:'absolute',top:'0',zIndex:'2' }}></div>
            <Menu
                onClick={onClick}
                style={{ width: winState ? width : collapsed ? 47 : 256,height:'100%' }}
                defaultSelectedKeys={[location.pathname.split('/')[location.pathname.split('/').length-1]]}
                inlineCollapsed={collapsed}
                mode="inline"
                items={items}
                className={winState?'collstate':'' }
            />
            <div className='routerView'>
                <nav className='head'>
                    <div className='collBtn'>
                        <AppstoreFilled onClick={toggleCollapsed} />
                    </div>
                    <div className='title'>
                        <h6>{ getItem(items)?getItem(items):'控制中心' }</h6>
                        <Button onClick={exitLogin} danger icon={ <ExportOutlined />}>退出登录</Button>
                    </div>
                    
                </nav>
                <Outlet></Outlet>
            </div>
        </div>
    )
}
